<script setup lang="ts">
import { BreadcurmbNav } from "@/interface/menu";
import { useMenuStore } from "@/store/menuStore";
import emitter from "@/utils/emitter";

const menuStore = useMenuStore();
const breadcurmbList = ref<
  Array<BreadcurmbNav>
>([
  {
    path: "/index",
    breadcrumbName: "首页",
  },
]);

const createBreadcrumb = async (key?: string) => {
  const find = menuStore.fixedMenuList.find((item) => item.path === key);
  if (find) {
    breadcurmbList.value = [{ path: key as string, breadcrumbName: find.name as string }];
    return
  }
  const { backPath, pathMap } = await menuStore.ceateBreadcrumbName(
    key ? key : menuStore.selectedKeys[0]
  );
  if (backPath) {
    breadcurmbList.value = backPath.split("#").reduce((pre, name) => {
      pre.push({
        path: pathMap[name],
        breadcrumbName: name,
        key: pathMap[name],
      });
      return pre;
    }, [] as any);
  }
};

onMounted(() => {
  emitter.on("refreshBreadcrumb", (key: string) => {
    createBreadcrumb(key);
  });
});
</script>

<template>
  <div class="ml-2">
    <a-breadcrumb :routes="breadcurmbList" separator="/">
      <a-breadcrumb-item v-for="(route, idx) in breadcurmbList" :key="idx">
        <span v-if="breadcurmbList.indexOf(route) === breadcurmbList.length - 1" class="dark:text-white">
          {{ route.breadcrumbName }}
        </span>
        <span class="dark:text-gray-300">
          {{ route.breadcrumbName }}
        </span>
      </a-breadcrumb-item>
      <!-- <template #itemRender="{ route }">
        <span v-if="breadcurmbList.indexOf(route) === breadcurmbList.length - 1" class="dark:text-white">
          {{ route.breadcrumbName }}
        </span>
        <span v-else class="dark:text-gray-300">
          {{ route.breadcrumbName }}
        </span>
        <router-link v-else :to="`/${paths.join('/')}`">
          {{ route.breadcrumbName }}
        </router-link>
      </template>
<template #separator>
        <span class="dark:text-white">/</span>
      </template> -->
    </a-breadcrumb>
  </div>
</template>

<style scoped>
.bc-enter-active {
  animation: bc_animation 0.3s;
}

.bc-leave-active {
  animation: bc_animation 0.3s reverse;
}

@keyframes bc_animation {
  0% {
    opacity: 0;
    transform: translateX(-10px);
  }

  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}
</style>
